<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> -->
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper.min.css" />

    <!-- Demo styles -->
    <style>
      .swiper-container {
        width: 100%;
        height: 200px;
      }
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        /* display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center; */
      }
      /*包裹自定义分页器的div的位置等CSS样式*/
      .swiper-pagination-custom {
        bottom: 10px;
        left: 0;
        width: 100%;
      }
      /*自定义分页器的样式，这个你自己想要什么样子自己写*/
      .swiper-pagination-customs {
        width: 30px;
        height: 4px;
        display: inline-block;
        background: #000;
        opacity: 0.3;
        margin: 0 5px;
      }
      /*自定义分页器激活时的样式表现*/
      .swiper-pagination-customs-active {
        display: inline-block;
        width: 30px;
        height: 4px;
        opacity: 1;
        margin: 0 5px;
        background-color: #f78e00;
      }
    </style>
  </head>
  <body>
    <!-- Swiper -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".swiper-container", {
        spaceBetween: 30,
        // autoplay:true,
        // loop:true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "custom",
          renderCustom: function(swiper, current, total) {
            var activeClass = "swiper-pagination-customs-active";
            var normalClass = "swiper-pagination-customs";
            var html = "";
            var temclass = "";
            for (let i = 1; i <= total; i++) {
              if (i === current) {
                temclass = activeClass;
              } else {
                temclass = normalClass;
              }
              html += "<span class=" + temclass + "></span>";
            }
            return html;
          }
        }
      });
      $(".swiper-pagination").on("click", "span", function() {
        var index = $(this).index();
        swiper.slideTo(index, 500, false); //切换到第一个slide，速度为1秒
      });
    </script>
  </body>
</html>
